<% layout('/layouts/default.html', {title: '', libs: ['dataGrid']}){ %>
<!-- <link rel="stylesheet" href="${ctxStatic}/modules/sys/sysDesktop.css?${_version}"> -->
<style>
    *{
        margin:0px;
        padding:0px
    }
    p{
        margin:0px
    }
    .kanHeader p {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 700;
        color: #231815;
    }
    .workKey{
        border-radius: 4px;
        margin: 10px 0 15px 0;
        text-align: center;
        background: #fff;
        -webkit-transition: -webkit-transform .3s;
        transition: -webkit-transform .3s;
        transition: transform .3s;
        transition: transform .3s,-webkit-transform .3s;
        padding: 0 24px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding-bottom: 15px;
        position: relative;
    }
    .shipTop {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        height: 54px;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 100%;
    }
    .shipTop h1 {
        font-size: 16px;
        font-weight: 500;
        margin:0px
    }
    .huls span {
        padding-left: 10px;
        font-size: 14px;
        cursor: pointer;
    }
    .tl{
        text-align: left;
    }
    .huizong p{
        border-radius: 4px;
        text-align: center;
        height: 110px;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        margin-right: 35px;
        cursor: pointer;
    }
    .huizong p span{
        display: block;
        color: #fff;
        font-size: 18px;
        padding-top: 20px;
    }
    .huizong p:last-child {
        margin-right: 0;
    }
    .sheachBao span {
        display: inline-block;
        margin-right: 10px;
        border-radius: 4px;
        font-size: 12px;
        color: #fff;
        padding: 0 5px;
        cursor: pointer;
        line-height: 24px;
    }
    .rightData .dataList span {
        padding-left: 10px;
        font-size: 14px;
        cursor: pointer;
    }
    .shipdivt li{
        display: inline-block;
        height: 32px;
        padding: 0 10px;
        line-height: 30px;
        font-size: 12px;
        color: #409eff;
        border: 1px solid #d9ecff;
        border-radius: 4px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 58px;
        cursor: pointer;
        text-align: center;
        margin-right:10px;
        margin-bottom: 8px;
    }
    .ff{
        display: flex;
        align-items: center;
        justify-content: end;
    }
    .f{
        float: left;

    }
    .fff{
        width: 95%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    .f{
        width: 10%;
        min-width: 120px;
    }

</style>

<style>
    .flex{
        display: flex;
    }
    .center{
        justify-content: center;
        align-items: center;
    }
    .start{
        justify-content: center;
        align-items: flex-start;
    }
    .bm-g{
        border-bottom: 1px solid gray;
    }
    .start{
        justify-content: start;
        align-items: center;
    }
    .Btitle{
        font-weight: 700;
        font-size: 24px;
    }
    .Ltitle{
        font-weight: 700;
        font-size: 16px;
    }
    .p5-0{
        padding: 5px 0px ;
    }
    .p10-0{
        padding: 10px 0px ;
    }
    .p10-10{
        padding: 10px 10px ;
    }
    .main{
        height: 400px;
    }
    .columns-Tab{
        width: 20%;
        height: 100%;
        overflow: scroll;
        overflow-x: hidden
    }
    .columns-Tab1{
        width: 20%;
        height: 100%;
        overflow: scroll;
        overflow-x: hidden;
    }
    /*.columns-Tab1 ul{*/
    /*    animation: change 1s linear;*/
    /*}*/

    .columns-Tab2{
        width: 20%;
        height: 100%;
        overflow: scroll;
        overflow-x: hidden
    }
    .columns-Tab3{
        width: 20%;
        height: 100%;
        overflow: scroll;
        overflow-x: hidden
    }
    .f-e{
        width: 80%;
        height: 100%;
    }
    li{
        list-style: none;
    }
    .columns-Tab1 ul li{
        margin: 10px 0px;
        background-color:#8e8e90 ;
        line-height: 66px;
        display: block;
        height: 66px;
        border-radius: 5px;
        cursor: pointer;
    }
    .columns-Tab2 ul li{
        margin: 10px 0px;
        background-color:#8e8e90 ;
        line-height: 66px;
        display: block;
        height: 66px;
        border-radius: 5px;
        cursor: pointer;
    }
    .columns-Tab3 ul li{
        margin: 10px 0px;
        background-color:#8e8e90 ;
        line-height: 66px;
        display: block;
        height: 66px;
        border-radius: 5px;
        cursor: pointer;
    }
    .tabActive{
        color: #eeeeee;
        background-color:  #8a4f0d!important;
    }
    .tabActive2{
        color: #eeeeee;
        background-color:  #8a4f0d!important;
    }
    .tabActive1{
        color: #f59a23;
    }
    .mt10{
        margin-top: 10px;
    }
    .month1 ul{
        height: 100%;
    }
    .month1 ul li {
        width: 8%;
        height: 43px;
        line-height: 43px;
        border: 1px solid #797979;
        margin-left: 3px;
        border-radius: 5px;
        cursor: pointer;
    }
    .month2 ul{
        height: 100%;
    }
    .month2 ul li {
        width: 8%;
        height: 43px;
        line-height: 43px;
        border: 1px solid #797979;
        margin-left: 3px;
        border-radius: 5px;
        cursor: pointer;
    }
    .month3 ul{
        height: 100%;
    }
    .month3 ul li {
        width: 8%;
        height: 43px;
        line-height: 43px;
        border: 1px solid #797979;
        margin-left: 3px;
        border-radius: 5px;
        cursor: pointer;
    }
    .columns{
        flex-flow: column;
    }
    .form-group{
        margin-bottom: 0px!important;
    }

    .yxkhLi{
        padding: 5px 5px 5px 10%;
        font-size: 16px;
        overflow:hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: left;
    }
    .hide{
        display: none!important;
    }
    .blue{
        color: #00a0e9;
    }
    .layui-layer-title{
        border-bottom: 1px solid #797979!important;
    }
    @keyframes change {
        0%{
            transform: translateX(-100%)
        }
        100%{
            transform: translateX(0%)
        }
    }


</style>



<!--......................-->
    <div class="workKey" style="margin-bottom: 0px;display: block" >
        <div class="yxkh">
            <div class="flex bm-g Btitle p10-0">
                经济运行考核排名
            </div>
            <div class="flex Ltitle p10-0 center">
                <span class="yxkh-y blue"></span>
                年
                <span class="yxkh-m blue">第一季度</span>
                经济运行考核排名     &nbsp;&nbsp;(<p style="cursor: pointer; color: #4b87ff" onclick="moreRank(1)" > 详情 </p>)
            </div>

            <div class="main flex center ">
                <div class="columns-Tab1 p10-10">
                    <ul>
                    </ul>
                </div>
                <div class="f-e p10-10 flex columns">
                    <div class="form-group ff">
                        <div class="col-md-10 fff">
                            <label class="control-label ">年度：</label>
                            <div class=" f">
<!--                                <select type='text' style='width:17.5vw;align-items: center;height: 32px'  id='selectYear1'>-->

<!--                                </select>-->
                                <#form:select path="selectYear1" maxlength="20" class="form-control w120" />
                            </div>
                        </div>
                        <div style="min-width: 60px">


                            <button onclick='btnImport(1)' class="btn btn-default gg1 btn-sm">${text('导入')}</button></div>

                    </div>
                    <div class="month1 mt10" style="height: 66px;">
                        <ul class="flex start">

                        </ul>
                    </div>

                    <div style="height: 300px; width: 100%"  id="myChart"></div>

                </div>


                </div>
            </div>
        </div>
    </div>
    <div class="workKey" style="margin-bottom: 0px;display: block" >
        <div class="zbcs">
            <div class="flex bm-g Btitle p10-0">
                经济指标增速排名
            </div>
            <div class="flex Ltitle p10-0 center">
                <span class="zbcs-y blue"></span>
                年
                <span class="zbcs-m blue">一月</span>
                经济指标增速排名     &nbsp;&nbsp;(<p style="cursor: pointer; color: #4b87ff" onclick="moreRank(2)" > 详情 </p>)
            </div>

            <div class="main flex center ">
                <div class="columns-Tab2 p10-10">
                    <ul>
                    </ul>
                </div>
                <div class="f-e p10-10 flex columns">
                    <div class="form-group ff">
                        <div class="col-md-10 fff">
                            <label class="control-label ">年度：</label>
                            <div class=" f">
<!--                                <select type='text' style='width:17.5vw;align-items: center;height: 32px'  id='selectYear2'>-->
<!--                                </select>-->
                                <#form:select path="selectYear2"  maxlength="20" class="form-control" />

                            </div>
                        </div>
                        <div style="min-width: 60px">


                            <button onclick='btnImport(2)' class="btn btn-default gg2 btn-sm">${text('导入')}</button></div>

                    </div>
                    <div class="month2 mt10" style="height: 66px;">
                        <ul class="flex start">

                        </ul>
                    </div>
                    <div style="height: 300px; width: 100%"  id="myChart1"></div>
                </div>

            </div>
        </div>
    </div>
    </div>
    <div class="workKey" style="margin-bottom: 0px;display: block" >
       <div class="jds">
           <div class="flex bm-g Btitle p10-0">
               经济指标绝对值排名
           </div>
           <div class="flex Ltitle p10-0 center">
               <span class="jds-y blue"></span>
               年
               <span class="jds-m blue">一月</span>
               经济指标绝对值排名   &nbsp;&nbsp;(<p style="cursor: pointer; color: #4b87ff" onclick="moreRank(3)" > 详情 </p>)
           </div>

           <div class="main flex center ">
               <div class="columns-Tab3 p10-10">
                   <ul>
                   </ul>
               </div>
               <div class="f-e p10-10 flex columns">
                   <div class="form-group ff">
                       <div class="col-md-10 fff">
                           <label class="control-label ">年度：</label>
                           <div class=" f">
                               <#form:select path="selectYear3" style='width:17.5vw;align-items: center;height: 32px' maxlength="20" class="form-control" />
                           </div>
                       </div>
                       <div style="min-width: 60px">

                           <button onclick='btnImport(3)' class="btn btn-default gg3 btn-sm" >${text('导入')}</button></div>
                   </div>

                   <div class="month3 mt10" style="height: 66px;">
                       <ul class="flex start">

                       </ul>
                   </div>
                   <div style="height: 300px; width: 100%"  id="myChart3"></div>
               </div>
           </div>
       </div>
    </div>
    </div>



<% } %>
<script src="${ctxStatic}/jquery/jquery-ui-sortable-1.12.1.min.js"></script>
<script src="${ctxStatic}/echarts/4.2/echarts.min.js"></script>
<script>
    var role = ${@RoleUtils.hasCurrentUserRole("data_board_import")};

    if ('${@UserUtils.getUser().getUserCode()}' != 'system'&&role ==false){
        $('.gg1').addClass('hide')
        $('.gg2').addClass('hide')
        $('.gg3').addClass('hide')
    }

    var date = new Date()
    // 定义的值
    // 经济运行考核排名
    var selectYear1=date.getFullYear()
    var selectMonth1=3
    var leftParam1=''
    var selectYear2=date.getFullYear()
    var selectMonth2=1
    var leftParam2=''
    var selectYear3=date.getFullYear()
    var selectMonth3=1
    var leftParam3=''
    var month=[
        '第一季度',
        '第二季度',
        '第三季度',
        '第四季度',
    ]
    var month1=[
        '一月',
        '二月',
        '三月',
        '四月',
        '五月',
        '六月',
        '七月',
        '八月',
        '九月',
        '十月',
        '十一月',
        '十二月',
    ]
    var yxkh = $('.columns-Tab1 ul')
    var zbcs = $('.columns-Tab2 ul')
    var jds  = $('.columns-Tab3 ul')
    // 现在的日期
    var TDyear=  date.getFullYear()
    var selectYear=[]
    for (var index = 0; index < TDyear-2022  + 1; index++) {
        selectYear.push({id:index,text:2022+index})
    }

    if (selectYear.length>1){
     selectYear=[
        selectYear.find(item=>{
            return  item.text==date.getFullYear()}),
        ...selectYear.filter((item,index)=>{
            return  item.text!==date.getFullYear()})
        ]
    }

    // console.log(selectYear)

    $('.yxkh-y').html(date.getFullYear())
    $('.zbcs-y').html(date.getFullYear())
    $('.jds-y').html(date.getFullYear())

    $("#selectYear1").select2({data: selectYear,placeholder:'请选择'})
    $("#selectYear2").select2({data: selectYear,placeholder:'请选择'})
    $("#selectYear3").select2({data: selectYear,placeholder:'请选择'})
    // $("#selectYear2  option[value=" + selectYear2 + "] ").attr("selected", true)
    // $("#selectYear3  option[value=" + selectYear3 + "] ").attr("selected", true)

    $('#selectYear1').change(function () {
        selectYear1=$("#selectYear1  option:selected").text()
        $('.yxkh-y').html(selectYear1)
        $('.yxkh-m').html('第一季度')
        selectMonth1=3
        $('.month1 ul li').eq(0).siblings().removeClass("tabActive1");
        $('.month1 ul li').eq(0).addClass("tabActive1")
        // console.log(1, selectYear1)
        $('.columns-Tab1 ul').empty()
        loading()
        getLeftParms1()
    })
    $('#selectYear2').change(function () {
        selectYear2=$("#selectYear2  option:selected").text()
        $('.zbcs-y').html(selectYear2)
        $('.zbcs-m').html('一月')
        selectMonth2=1
        $('.month2 ul li').eq(0).siblings().removeClass("tabActive1");
        $('.month2 ul li').eq(0).addClass("tabActive1")
        $('.columns-Tab2 ul').empty()
        loading()
        getLeftParms2()
    })
    $('#selectYear3').change(function () {
        selectYear3=$("#selectYear3  option:selected").text()
        $('.jds-m').html('一月')


        $('.jds-y').html(selectYear3)
        selectMonth3=1
        $('.month3 ul li').eq(0).siblings().removeClass("tabActive1");
        $('.month3 ul li').eq(0).addClass("tabActive1")
        $('.columns-Tab3 ul').empty()
        loading()
        getLeftParms3()
    })
    // 获取经济运行考核排名 LeftParms数据
    const getLeftParms1=function(){
        $.ajax({
            url: "${ctx}/dceconomicindicator/dcEconomicIndicator/getColumn",
            type:'get',
            data: {
                selectYear:selectYear1,
                selectMonth:selectMonth1,
                importType:'1'
            },
            dataType: "json",
            success:function (res) {
                if (res.stringList){
                    res.stringList.map((item, index) => {
                        yxkh.append(
                            '<li class="yxkhLi" onclick="click1(' + index + ')" title="'+item+'">' +
                            item +
                            '</li>'
                        )
                    })
                    leftParam1=res.stringList[0]
                    $('.columns-Tab1 ul li').eq(0).addClass("tabActive");
                    initPic1()
                }else {
                    $('.columns-Tab1 ul').empty()
                   leftParam1=''
                    initPic1()
                }
            }
        })
    }
    getLeftParms1()
    const getLeftParms2=function(){
        $.ajax({
            url: "${ctx}/dceconomicindicator/dcEconomicIndicator/getColumn",
            type:'get',
            data: {
                selectYear:selectYear2,
                selectMonth:selectMonth2,
                importType:'2'
            },
            dataType: "json",
            success:function (res) {
                if (res.stringList){
                    res.stringList.map((item, index) => {
                        zbcs.append(
                            '<li class="yxkhLi" onclick="click2(' + index + ')" title="'+item+'">' +
                            item +
                            '</li>'
                        )
                    })
                    leftParam2=res.stringList[0]
                    $('.columns-Tab2 ul li').eq(0).addClass("tabActive");
                    initPic2()
                }else {
                    $('.columns-Tab2 ul').empty()
                    leftParam2=''
                    initPic2()
                }
            }
        })
    }
    getLeftParms2()

    const getLeftParms3=function(){
        $.ajax({
            url: "${ctx}/dceconomicindicator/dcEconomicIndicator/getColumn",
            type:'get',
            data: {
                selectYear:selectYear3,
                selectMonth:selectMonth3,
                importType:'3'
            },
            dataType: "json",
            success:function (res) {
                if (res.stringList){
                    res.stringList.map((item, index) => {
                        jds.append(
                            '<li class="yxkhLi" onclick="click3(' + index + ')" title="'+item+'">' +
                            item +
                            '</li>'
                        )
                    })
                    leftParam3=res.stringList[0]
                    $('.columns-Tab3 ul li').eq(0).addClass("tabActive");
                    initPic3()
                }else {
                    $('.columns-Tab3 ul').empty()
                    leftParam3=''
                    initPic3()
                }
            }
        })
    }
    getLeftParms3()

  function click1(val){
      leftParam1=$('.columns-Tab1 ul li').eq(val)[0].innerHTML
      $('.columns-Tab1 ul li').eq(val).siblings().removeClass("tabActive");
      $('.columns-Tab1 ul li').eq(val).addClass("tabActive");
      initPic1()
  }
    function click2(val){
        leftParam2=$('.columns-Tab2 ul li').eq(val)[0].innerHTML
        $('.columns-Tab2 ul li').eq(val).siblings().removeClass("tabActive");
        $('.columns-Tab2 ul li').eq(val).addClass("tabActive");
        initPic2()
    }
    function click3(val){
        leftParam3=$('.columns-Tab3 ul li').eq(val)[0].innerHTML
        $('.columns-Tab3 ul li').eq(val).siblings().removeClass("tabActive");
        $('.columns-Tab3 ul li').eq(val).addClass("tabActive");
        initPic3()
    }
    month.map((item)=>{
        $('.month1 ul').append(
            '<li>'+
            item +
            '</li>'
        )

    })

    month1.map((item)=>{
        $('.month2 ul').append(
            '<li>'+
            item +
            '</li>'
        )
        $('.month3 ul').append(
            '<li>'+
            item +
            '</li>'
        )
    })

    const  loading=function(){
        var loading = layer.load('加载中...', {
            shade: [0.3,'#fff'] //0.1透明度的白色背景
        });
        setTimeout(function (data) {
            //最后数据加载完 让 loading层消失
            layer.close(loading);
        }, 500);
    }

    $('.month1 ul li').eq(0).addClass("tabActive1");
    $('.month2 ul li').eq(0).addClass("tabActive1");
    $('.month3 ul li').eq(0).addClass("tabActive1");
    // 选择月份
    var change=false

    $('.month1 ul li').click(function () {
        var index = $(this).index();
        $(this).siblings().removeClass("tabActive1");
        $(this).addClass("tabActive1");
        $('.yxkh-m').html(month[index])
        $('.columns-Tab1 ul').empty()
        if (index==0){
            selectMonth1=3
        }
        if (index==1){
            selectMonth1=6
        }
        if (index==2){
            selectMonth1=9
        }
        if (index==3){
            selectMonth1=12
        }

        // $('.columns-Tab1').fadeOut(1000).fadeIn(500);
        loading()

        getLeftParms1()
    })
    $('.month2 ul li').click(function () {
        var index = $(this).index();
        $(this).siblings().removeClass("tabActive1");
        $(this).addClass("tabActive1");
        $('.zbcs-m').html(month1[index])
        $('.columns-Tab2 ul').empty()

            selectMonth2=index+1

        loading()
        getLeftParms2()
    })
    $('.month3 ul li').click(function () {
        var index = $(this).index();
        $(this).siblings().removeClass("tabActive1");
        $(this).addClass("tabActive1");
        $('.jds-m').html(month1[index])
        $('.columns-Tab3 ul').empty()
        selectMonth3=index+1
        loading()
        getLeftParms3()
    })



const  btnImport=function(val){
        var contentJs;
        var selectYear;
        if(val==1){
            contentJs = js.template('importTpl')
            selectYear = selectYear1
        }
        if(val==2){
            contentJs = js.template('importTpl1')
            selectYear = selectYear2
        }
        if(val==3){
            contentJs = js.template('importTpl2')
            selectYear = selectYear3
        }

    js.layer.open({
        type: 1,
        area: ['400px'],
        title: '${text("导入主要经济指标数据")}',
        resize: false,
        scrollbar: true,
        content: contentJs,
        success: function(layero, index){
            layero.find('input[type="checkbox"]').iCheck();
            console.log(123123)

        },
        btn: ['<i class="fa fa-check"></i> ${text("导入")}',
            '<i class="fa fa-remove"></i> ${text("关闭")}'],
        btn1: function(index, layero){
            var form = {
                inputForm: layero.find('#inputForm'),
                file: layero.find('#file').val(),
                import:layero.find('#import').val(val),
                selectYear:layero.find('#year').val(selectYear)
            };









            if (form.file == '' || (!js.endWith(form.file, '.xls') && !js.endWith(form.file, '.xlsx'))){
                js.showMessage("${text('文件不正确，请选择后缀为“xls”或“xlsx”的文件。')}", null, 'warning');
                return false;
            }
            js.ajaxSubmitForm(form.inputForm, function(data){

                js.showMessage(data.message);
                if(data.result == Global.TRUE){
                  var name= layero.find('#selectMonth option:selected').text()
                    js.layer.closeAll();
                    if (val==1){
                        $('.yxkh-m').html(name)
                        selectMonth1=layero.find('#selectMonth').val()
                        var num=0
                        if (selectMonth1==3){
                            num=0
                        }
                        if (selectMonth1==6){
                            num=1
                        }
                        if (selectMonth1==9){
                            num=2
                        }
                        if (selectMonth1==12){
                            num=3
                        }

                        $('.month1 ul li').siblings().removeClass("tabActive1")
                        $('.month1 ul li').eq(num).addClass("tabActive1")

                        getLeftParms1()
                        initPic1()
                    }
                    if (val==2){
                        $('.zbcs-m').html(name)
                        selectMonth2=layero.find('#selectMonth').val()
                        $('.month2 ul li').siblings().removeClass("tabActive1")
                        $('.month2 ul li').eq(selectMonth2-1).addClass("tabActive1")


                        getLeftParms2()
                        initPic2()
                    }
                    if (val==3){
                        $('.jds-m').html(name)
                        selectMonth3=layero.find('#selectMonth').val()
                        $('.month3 ul li').siblings().removeClass("tabActive1")
                        $('.month3 ul li').eq(selectMonth3-1).addClass("tabActive1")


                        getLeftParms3()
                        initPic3()
                    }



                }
                page();
            }, "json");
            return false;
        }
    });
}

    let myChart1
    let myChart2
    let myChart3
   const initPic1= function () {
        $.ajax({
            url: "${ctx}/dceconomicindicator/dcEconomicIndicator/getRank1",
            type: "post",
            data: {
                leftParam:leftParam1,
                selectYear:selectYear1,
                selectMonth:selectMonth1,
                importType:'1'
            },
            dataType: "json",
            success: function(res){
                myChart1 = echarts.init(document.getElementById('myChart'));
                myChart1.setOption({
                    tooltip : {
                        trigger: 'axis',
                        formatter: function (v) {


                            var tip=''
                            tip += '<div class="tl">全省排名:  '+ res.rank[ v[0].dataIndex] + '</div> <div class="tl">得分:  '+ v[0].value +'</div>'
                           return tip
                        },
                        textStyle: {
                            fontSize: 16,
                            color: "#ccc",
                            textAlign:'left',
                        },
                    },
                    color: ["#5087EC"],
                    toolbox: {
                        show: false,
                    },
                    // dataZoom: [
                    //     {
                    //         show: true,
                    //         realtime: true,
                    //         start: 0,
                    //         end: 60,
                    //         height: 20,
                    //         bottom: -5,
                    //         textStyle:false
                    //     },
                    // ],
                    grid : {
                        top: "3%",
                        left: "0%",
                        right: "0%",
                        bottom: "15px",
                        containLabel: true,
                    },
                    xAxis : [
                        {
                            type : 'category',
                            axisLabel: {
                                //坐标轴刻度标签的相关设置。
                                borderWidth:10,
                                interval:'auto',
                                showMinLabel:true,
                                showMaxLabel:true,
                            },

                            data : res.area
                        }

                    ],
                    yAxis : [
                        {
                            type: "value",


                        }

                    ],

                    series : [
                        {

                            type: "bar",
                            data:res.point,
                            barWidth: 30,

                        },

                    ],
                    data:res
                });
            }
        });
    }
    const initPic2= function () {
        $.ajax({
            url: "${ctx}/dceconomicindicator/dcEconomicIndicator/getRank1",
            type: "post",
            data: {
                leftParam:leftParam2,
                selectYear:selectYear2,
                selectMonth:selectMonth2,
                importType:'2'
            },
            dataType: "json",
            success: function(res){
                myChart2 = echarts.init(document.getElementById('myChart1'));
                myChart2.setOption({
                    tooltip : {
                        trigger: 'axis',
                        formatter: function (v) {


                            var tip=''
                            tip += '<div class="tl">位次:  '+ res.rank[ v[0].dataIndex] + '</div> <div class="tl">增长%：'+ v[0].value +'</div>'
                            return tip
                        },
                        textStyle: {
                            fontSize: 16,
                            color: "#ccc",
                            textAlign:'left',
                        },
                    },
                    color: ["#5087EC"],
                    toolbox: {
                        show: false,
                    },
                    // dataZoom: [
                    //     {
                    //         show: true,
                    //         realtime: true,
                    //         start: 0,
                    //         end: 60,
                    //         height: 20,
                    //         bottom: -5,
                    //         textStyle:false
                    //     },
                    // ],
                    grid : {
                        top: "3%",
                        left: "0%",
                        right: "0%",
                        bottom: "15px",
                        containLabel: true,
                    },
                    xAxis : [
                        {
                            type : 'category',
                            axisLabel: {
                                //坐标轴刻度标签的相关设置。
                                borderWidth:10,
                                interval:'auto',
                                showMinLabel:true,
                                showMaxLabel:true,
                            },

                            data : res.area
                        }

                    ],
                    yAxis : [
                        {
                            type: "value",


                        }

                    ],

                    series : [
                        {

                            type: "bar",
                            data:res.point,
                            barWidth: 30,

                        },

                    ],
                    data:res
                });

            }
        });
    }
    $(window).resize(function () {
        myChart1.resize()
        myChart2.resize()
        myChart3.resize()

    });
    const initPic3= function () {
        $.ajax({
            url: "${ctx}/dceconomicindicator/dcEconomicIndicator/getRank1",
            type: "post",
            data: {
                leftParam:leftParam3,
                selectYear:selectYear3,
                selectMonth:selectMonth3,
                importType:'3'
            },
            dataType: "json",
            success: function(res){
                myChart3 = echarts.init(document.getElementById('myChart3'));
                myChart3.setOption({
                    tooltip : {
                        trigger: 'axis',
                        formatter: function (v) {
                            var tip=''
                            tip += '<div class="tl">位次:  '+ res.rank[ v[0].dataIndex] + '</div> <div class="tl">占全省%:  '+ changeNum4(res.province_ab[ v[0].dataIndex]) +'</div> <div class="tl">绝对值:  '+ changeNum4(v[0].value) +'</div>'
                            return tip
                        },
                        textStyle: {
                            fontSize: 16,
                            color: "#ccc",
                            textAlign:'left',
                        },
                    },
                    color: ["#5087EC"],
                    toolbox: {
                        show: false,
                    },
                    // dataZoom: [
                    //     {
                    //         show: true,
                    //         realtime: true,
                    //         start: 0,
                    //         end: 60,
                    //         height: 20,
                    //         bottom: -5,
                    //         textStyle:false
                    //     },
                    // ],
                    grid : {
                        top: "3%",
                        left: "0%",
                        right: "0%",
                        bottom: "15px",
                        containLabel: true,
                    },
                    xAxis : [
                        {
                            type : 'category',
                            axisLabel: {
                                //坐标轴刻度标签的相关设置。
                                borderWidth:10,
                                interval:'auto',
                                showMinLabel:true,
                                showMaxLabel:true,
                            },

                            data : res.area
                        }

                    ],
                    yAxis : [
                        {
                            type: "value",


                        }

                    ],

                    series : [
                        {

                            type: "bar",
                            data:res.point,
                            barWidth: 30,

                        },

                    ],
                    data:res
                });

            }
        });
    }

    function moreRank(v) {
        if(v==1){
            js.addTabPage(null, "经济运行考核排名","${ctx}/dceconomicindicator/dcEconomicIndicator/list?importType=1&selectYear="+selectYear1+ "&selectMonth="+selectMonth1, true);
        }
        if(v==2){
            js.addTabPage(null, "经济指标增速排名","${ctx}/dceconomicindicator/dcEconomicIndicator/list?importType=2&selectYear="+selectYear2+ "&selectMonth="+selectMonth2 , true);
        }
        if(v==3){
            js.addTabPage(null, "经济指标绝对值排名","${ctx}/dceconomicindicator/dcEconomicIndicator/list?importType=3&selectYear="+selectYear3 + "&selectMonth="+selectMonth3, true);
        }

    }

    // 将传入的数字，保留4位小数
    function changeNum4(num) {
        // return String(num).replace(/^(.*\..{4}).*$/,"$1");
        return Number(num).toFixed(4);
    }
</script>

<script id="importTpl" type="text/template">
    <form id="inputForm" action="${ctx}/dceconomicindicator/dcEconomicIndicator/importInfo" method="post" enctype="multipart/form-data"
          class="form-horizontal mt20 mb10" style="overflow:auto;max-height:200px;">
        <div class="row">
            <div class="col-xs-12 col-xs-offset-1">
                <#form:select path="selectMonth" dictType="dc_quarter_year" class="form-control required " />
                <font color="red" class="pull-left mt10">
                    ${text('请选择季度（此季度为数据的所属季度）')}
                </font>
                <input type="file" id="file" name="file" class="form-file"/>
                <input type="text" id="import" name="importType" class="form-file" style="display: none"/>
                <input type="text" id="year" name="selectYear" class="form-file" style="display: none"/>
                <div class="mt10 MOBAN pt5">
                    <a href="${ctx}/dceconomicindicator/dcEconomicIndicator/importTemplate?importType=1" class="btn btn-default btn-xs"><i class="fa fa-file-excel-o"></i> ${text('下载模板')}</a>
                </div>
                <font color="red" class="pull-left mt10">
                    ${text('提示：仅允许导入“xls”或“xlsx”格式文件！')}
                </font>
            </div>
        </div>
    </form>
</script>
<script id="importTpl1" type="text/template">
    <form id="inputForm" action="${ctx}/dceconomicindicator/dcEconomicIndicator/importInfo" method="post" enctype="multipart/form-data"
          class="form-horizontal mt20 mb10" style="overflow:auto;max-height:200px;">
        <div class="row">
            <div class="col-xs-12 col-xs-offset-1">
                <#form:select path="selectMonth" dictType="dc_month_year" class="form-control required " />
                <font color="red" class="pull-left mt10">
                    ${text('请选择月份（此月份为数据的所属月份）')}
                </font>
                <input type="file" id="file" name="file" class="form-file"/>
                <input type="text" id="import" name="importType" class="form-file" style="display: none"/>
                <input type="text" id="year" name="selectYear" class="form-file" style="display: none"/>
                <div class="mt10 MOBAN pt5">
                    <a href="${ctx}/dceconomicindicator/dcEconomicIndicator/importTemplate?importType=2" class="btn btn-default btn-xs"><i class="fa fa-file-excel-o"></i> ${text('下载模板')}</a>
                </div>
                <font color="red" class="pull-left mt10">
                    ${text('提示：仅允许导入“xls”或“xlsx”格式文件！')}
                </font>
            </div>
        </div>
    </form>
</script>
<script id="importTpl2" type="text/template">
    <form id="inputForm" action="${ctx}/dceconomicindicator/dcEconomicIndicator/importInfo" method="post" enctype="multipart/form-data"
          class="form-horizontal mt20 mb10" style="overflow:auto;max-height:200px;">
        <div class="row">
            <div class="col-xs-12 col-xs-offset-1">
                <#form:select path="selectMonth" dictType="dc_month_year" class="form-control required " />
                <font color="red" class="pull-left mt10">
                    ${text('请选择月份（此月份为数据的所属月份）')}
                </font>
                <input type="file" id="file" name="file" class="form-file"/>
                <input type="text" id="import" name="importType" class="form-file" style="display: none"/>
                <input type="text" id="year" name="selectYear" class="form-file" style="display: none"/>
                <div class="mt10 MOBAN pt5">
                    <a href="${ctx}/dceconomicindicator/dcEconomicIndicator/importTemplate?importType=3" class="btn btn-default btn-xs"><i class="fa fa-file-excel-o"></i> ${text('下载模板')}</a>
                </div>
                <font color="red" class="pull-left mt10">
                    ${text('提示：仅允许导入“xls”或“xlsx”格式文件！')}
                </font>
            </div>
        </div>
    </form>
</script>

<script>

</script>

